<template>
	<view class="uni-setting-lr">

		<!--====================  preloader area ====================-->
		<!-- 	<view class="preloader-activate preloader-active">
			<view class="preloader-area-wrap">
				<view class="spinner d-flex justify-content-center align-items-center h-100">
					<view class="img-loader"></view>
				</view>
			</view>
		</view> -->
		<!--====================  End of preloader area  ====================-->

		<view class="body-wrapper bg-color--gradient space-pt--70 space-pb--120">
			<!-- auth page header -->
			<view class="auth-page-header space-mb--50">
				<view class="container">
					<view class="row">
						<view class="col-12">
							<view class="auth-page-header__title">Welcome</view>
							<view v-if="lr" class="auth-page-header__text">
								没有账号? 赶快注册吧
							</view>
							<view v-else class="auth-page-header__text">
								登陆之后就可以更愉快的购物啦
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- auth page header end -->
			<!-- auth page body -->
			<view class="auth-page-body" :style="lr? '':'paddingBottom: 140upx'">
				<view class="container">
					<view class="row">
						<view class="col-12">
							<!-- Auth form -->
							<view class="auth-form">

								<!-- 表单 -->
								<form @submit="formSubmit">

									<view v-if="lr" class="auth-form__single-field space-mb--30">
										<label class="field-label" for="name">昵称</label>
										<input data-type="inputName" ref="inputName" @focus="judgeFocus('focus', $event)" @blur="judgeFocus('blur', $event)"
										 class="field-input" type="text" name="name" id="name" placeholder="请输入昵称" :value="name" maxlength="8" @input="inputChange">
									</view>

									<view class="auth-form__single-field space-mb--30">
										<label class="field-label" for="phone">手机</label>
										<input data-type="inputPhone" ref="inputPhone" @focus="judgeFocus('focus', $event)" @blur="judgeFocus('blur', $event)"
										 class="field-input" type="text" name="phone" id="phone" placeholder="请输入手机号码" :value="phone">
									</view>

									<view class="auth-form__single-field space-mb--30">
										<label class="field-label" for="password">密码</label>
										<input data-type="inputPwd" ref="inputPwd" @focus="judgeFocus('focus', $event)" @blur="judgeFocus('blur', $event)"
										 class="field-input" password name="password" id="password" placeholder="请输入密码" :value="password">
									</view>

									<view class="auth-form__single-field space-mb--30">
										<view v-if="lr" class="auth-form__info-text">
											已有账号?
											<navigator class="navigator-text" url="/pages/setting/login">马上登录</navigator>
										</view>
										<view v-else class="auth-form__info-text">
											没有账号?
											<navigator class="navigator-text" url="/pages/setting/register">马上注册</navigator>
										</view>
									</view>

									<button form-type="submit" class="auth-form__button">{{lr ? '注册' : '登录'}}</button>
								</form>

							</view>
							<!-- Auth form end -->
						</view>
					</view>
				</view>
			</view>
			<!-- auth page body end -->
		</view>

	</view>
</template>

<script>
	export default {
		name: "uni-setting-lr",
		data() {
			return {
				name: "",
				phone: "",
				password: ""
			}
		},
		props: {
			lr: {
				type: Boolean,
				required: true
			}
		},
		methods: {
			// focus状态下显示绿色的border
			judgeFocus(type, e) {
				if (type === "focus") {
					this.$refs[e.currentTarget.dataset.type].$el.style.borderBottomColor = "#00C569"
				} else {
					this.$refs[e.currentTarget.dataset.type].$el.style.borderBottomColor = "#E6E6E6"
				}
			},
			formSubmit(e) {
				let formdata = e.detail.value
				console.log(formdata)
			}
		}
	}
</script>

<style lang="scss">
	.bg-color--gradient {
		background-image: linear-gradient(to bottom, #FFFFFF 0%, #F1F1F1 100%);
	}

	.container {
		width: 100%;
		padding-right: 30upx;
		padding-left: 30upx;
		margin-right: auto;
		margin-left: auto;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin-right: -30upx;
		margin-left: -30upx;
	}

	.col-12 {
		flex: 0 0 100%;
		max-width: 100%;
		position: relative;
		width: 100%;
		padding-right: 30upx;
		padding-left: 30upx;
	}

	.space-mb--50 {
		margin-bottom: 100upx;
	}

	.space-pt--70 {
		padding-top: 140upx;
	}

	.space-pb--120 {
		padding-bottom: 240upx;
	}

	.space-mb--30 {
		margin-bottom: 30px;
	}

	.uni-setting-lr {
		.body-wrapper {

			// 头部
			.auth-page-header {

				.auth-page-header__title {
					font-size: 60upx;
					font-weight: 700;
					margin-bottom: 10upx;
					color: #02011E;
				}

				.auth-page-header__text {
					color: #6E6E6E;
				}
			}

			// 表单
			.auth-page-body {
				.auth-form {
					padding: 80upx 40upx;
					background-color: #FFFFFF;

					.auth-form__single-field {
						.field-label {
							font-size: 32upx;
							margin-bottom: 10upx;
							color: #02011E;
							display: block;
						}

						.field-input {
							font-size: 36upx;
							display: block;
							width: 100%;
							margin: 30upx 0;
							padding-bottom: 12upx;
							color: #02011E;
							border: none;
							border-bottom: 2px solid #E6E6E6;
						}

						.auth-form__info-text {
							color: #6E6E6E;

							.navigator-text {
								color: #00C569;
								display: inline-block;
							}
						}
					}

					.auth-form__button {
						font-size: 16px;
						line-height: 1;
						width: 100%;
						padding: 15px 0;
						color: #FFFFFF;
						border: none;
						background: none;
						background-color: #00C569;
					}
				}
			}
		}
	}
</style>
